<template>
  <div>
    <el-container>
      <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
        <div style="display: inline">
          <el-input
            size="mini"
            style="width:200px"
            placeholder="会员姓名"
            v-model="queryDate.name">
          </el-input>
           <el-input
            size="mini"
            style="width:200px"
            placeholder="会员卡号"
            v-model="queryDate.cardNo">
          </el-input>
          <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search" @click="searchMember">搜索</el-button>
          <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-plus" @click="showAddMemberView">添加</el-button>
        </div>
      </el-header>
      <el-main style="padding-left: 0px;padding-top: 0px">
        <div>
          <el-table
            :data="members"
            v-loading="tableLoading"
            border
            size="mini"
            style="width: 100%">
            <el-table-column
              type="selection">
            </el-table-column>
            <el-table-column
              prop="cardNo"
              label="会员号">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名">
            </el-table-column>
            <el-table-column
              prop="genderDesc"
              label="性别">
            </el-table-column>
            <el-table-column
              prop="age"
              label="年龄">
            </el-table-column>
            <!--<el-table-column
              width="85"
              align="left"
              label="出生日期">
              <template slot-scope="scope">{{ scope.row.birthday | formatDate}}</template>
            </el-table-column>-->
            <el-table-column
              prop="memberTypeDesc"
              label="会员类型">
            </el-table-column>
            <el-table-column
              prop="idNum"
              label="身份证号码">
            </el-table-column>
            <el-table-column
              prop="address"
              label="家庭住址">
            </el-table-column>
            <el-table-column
              prop="phoneNo"
              label="手机">
            </el-table-column>
            <el-table-column
              prop="storeName"
              label="商店">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="showEditMemberView(scope.row)" style="padding: 3px 4px 3px 4px;margin: 2px" size="mini">
                  编辑
                </el-button>
                <el-button type="danger" style="padding: 3px 4px 3px 4px;margin: 2px" size="mini"@click="deleteMember(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: space-between;margin: 2px">
            <el-pagination
              background
              :page-size="10"
              :current-page="currentPage"
              @current-change="currentChange"
              layout="prev, pager, next"
              :total="totalCount">
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
    <el-dialog
      :title="dialogTitle"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="40%">
      <el-form :model="member" :rules="rules" ref="addMemberForm">
        <el-form-item label="姓名:" prop="name" :label-width="formLabelWidth">
          <el-input prefix-icon="el-icon-edit" v-model="member.name" size="mini" style="width: 150px;display: block;"
                    placeholder="请输入会员姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别:" prop="gender" :label-width="formLabelWidth" style="text-align: left">
          <el-radio-group v-model="member.gender" >
            <el-radio label="1">男</el-radio>
            <el-radio style="margin-left: 15px" label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄:" prop="age" :label-width="formLabelWidth">
          <el-input-number v-model="member.age" :min="1" :max="150" size="mini" label="会员年龄" style="float:left"></el-input-number>
        </el-form-item>
        <el-form-item label="身份证号码:" prop="idNum" :label-width="formLabelWidth">
          <el-input prefix-icon="el-icon-edit" v-model="member.idNum" size="mini" style="width: 180px;display: block;"
                    placeholder="请输入身份证号码..."></el-input>
        </el-form-item>
        <el-form-item label="会员卡号:" prop="cardNo" :label-width="formLabelWidth">
          <el-input prefix-icon="el-icon-edit" v-model="member.cardNo" size="mini" style="width: 200px;display: block;"
                    placeholder="请输入会员卡号"></el-input>
        </el-form-item>
         <el-form-item label="所属门店:" prop="storeId" :label-width="formLabelWidth">
            <el-select v-model="member.storeId" filterable placeholder="请选择" size="mini" style="float:left">
              <el-option
                v-for="item in stores"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机:" prop="phoneNo" :label-width="formLabelWidth">
          <el-input prefix-icon="el-icon-edit" v-model="member.phoneNo" size="mini" style="width: 200px;display: block;"
                    placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址:" prop="address" :label-width="formLabelWidth">
          <el-input prefix-icon="el-icon-edit" v-model="member.address" size="mini" style="width: 200px;display: block;"
                    placeholder="请输入家庭住址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button size="mini" type="primary" @click="addMember('addMemberForm')">确 定</el-button>
          <el-button size="mini" @click="cancelEidt">取 消</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      let validateCardNo = (rule, value, callback)=> {
        if (!/^[0-9]*$/.test(value)) {
          callback(new Error('请输入数字'));
        }
        callback();
      };
      return {
        stores:[],
        formLabelWidth: '120px',
        members: [],
        keywords: '',
        dialogTitle: '',
        multipleSelection: [],
        totalCount: -1,
        currentPage: 1,
        dialogVisible: false,
        tableLoading: false,
        queryDate: {
          name:'',
          cardNo:''
        },
        member: {
          age: '',
          cardNo: '',
          gender: '',
          id: '',
          idNum: '',
          memberType: '',
          name: '',
          phone: '',
          address: '',
          phoneNo: '',
          storeId: ''
        },
        rules: {
          name: [{required: true, message: '必填:姓名', trigger: 'blur'}],
          gender: [{required: true, message: '必填:性别', trigger: 'blur'}],
          age: [{required: true, message: '必填:年龄', trigger: 'blur'},
            {type: 'number', message: '必须为数值类型', trigger: 'blur'}],
          cardNo: [{required: true, message: '必填:会员卡号'},
            {type: 'number', validator: validateCardNo , message: '必须为数字类型'}],
          storeId: [{required: true, message: '请选择门店', trigger: 'blur'}],
          idNum: [{
            required: true,
            message: '必填:身份证号码',
            trigger: 'blur'
          }, {
            pattern: /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/,
            message: '身份证号码格式不正确',
            trigger: 'blur'
          }],
          phoneNo: [{required: true, message: '必填:电话号码', trigger: 'blur'},
            {pattern: /^1[3|4|5|8][0-9]\d{4,8}$/, message:'电话格式有误', trigger: 'blur'}],
          address: [{required: true, message: '必填:联系地址', trigger: 'blur'}]
        }
      };
    },
    created: function () {
      this.stores = this.$store.state.stores.map(item => {
        let result = {};
        result.value=item.storeId;
        result.label=item.storeName
        return result;
      })
    },
    mounted: function () {
      this.loadMember();
    },
    methods: {
      deleteManyMembers(){
        this.$confirm('此操作将删除[' + this.multipleSelection.length + ']条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var ids = '';
          for (var i = 0; i < this.multipleSelection.length; i++) {
            ids += this.multipleSelection[i].id + ",";
          }
          this.doDelete(ids);
        }).catch(() => {
        });
      },
      deleteMember(row){
        this.$confirm('此操作将永久删除[' + row.name + '], 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doDelete(row.id);
        }).catch(() => {
        });
      },
      doDelete(ids){
        this.tableLoading = true;
        var _this = this;
        this.deleteRequest("/memberInfo/member/" + ids).then(resp=> {
          _this.tableLoading = false;
          _this.$message({type: "success", message: '删除成功'});
          _this.loadMember();
        }).catch(error => {
           _this.$message({type: "fali", message: "删除失败"});
        })
      },
      keywordsChange(val){
        if (val == '') {
          this.loadMember();
        }
      },
      searchMember(){
        this.loadMember();
      },
      currentChange(currentChange){
        this.currentPage = currentChange;
        this.loadMember();
      },
      loadMember(){
        var _this = this;
        this.tableLoading = true;
        this.postJsonRequest("/memberInfo/member/list?pageNum=" + this.currentPage + "&pageSize=10",this.queryDate,
        {
          'Content-Type': 'application/json'
        }).then(resp=> {
          this.tableLoading = false;
          if (resp && resp.status == 200) {
            if (resp.data) {
              _this.members = resp.data.result;
              _this.totalCount = resp.data.total;
              _this.members.map(function (member, index, array) {
                _this.$store.state.stores.forEach(item => {
                  if (member.storeId == item.storeId) {
                    member.storeName = item.storeName
                  }
                })
              })
            } else {
              _this.members = [];
              _this.totalCount = 0;
            }
//            _this.emptyMemberData();
          }
        }).catch((e) => {
          console.log(e)
        })
      },
      loadMemberById () {

      },
      addMember(formName){
        var _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.member.id) {
              //更新
              this.tableLoading = true;
              this.putJsonRequest("/memberInfo/member/"+this.member.id, this.member).then(resp=> {
                  _this.$message({type: "success", message: '修改成功'});
                  _this.dialogVisible = false;
                  _this.emptyMemberData();
                  _this.loadMember();
              }).catch(error => {
                let message = error.message
                if (!!error.response && !!error.response.data) {
                  message = (error.response.data.message || message)
                }
                this.tableLoading = false;
                 _this.$message({type: "error", message: message||'修改失败'});
              })
            } else {
              //添加
              this.tableLoading = true;
              this.postJsonRequest("/memberInfo/member", this.member).then(resp=> {
                _this.$message({type: "success", message: '注册成功'});
                _this.dialogVisible = false;
                _this.emptyMemberData();
                _this.loadMember();
              }).catch(error => {
                this.tableLoading = false;
                let message = error.message
                if (!!error.response && !!error.response.data) {
                  message = (error.response.data.message || message)
                }
                 _this.$message({type: "error", message: message||'注册失败'});
              })
            }
          } else {
            return false;
          }
        });
      },
      cancelEidt(){
        this.dialogVisible = false;
        this.emptyMemberData();
      },
      showEditMemberView(row){
        this.dialogTitle = "修改会员信息";
        this.dialogVisible = true;
        let _this = this;
        this.getRequest("/memberInfo/member/"+row.id).then(resp=> {
          _this.member = resp.data;
          _this.member.gender = resp.data.gender.toString();
          _this.tableLoading = false;
      }).catch(error => {
          _this.$message({type: "error", message: '注册失败'});
      })
      },
      showAddMemberView(){
        this.dialogTitle = "添加会员";
        this.dialogVisible = true;
      },
      emptyMemberData(){
        this.member = {
          age: '',
          cardNo: '',
          gender: '',
          id: '',
          idNum: '',
          memberType: '',
          name: '',
          address: '',
          phoneNo: '',
          storeId: ''
        }
      }
    }
  };
</script>
<style>
  .el-dialog__body {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .el-dialog__header {
    text-align: left;
  }

  .slide-fade-enter-active {
    transition: all .8s ease;
  }

  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
